<template>
  <view class="my-popup">
    <u-popup :show="show" @close="close" @open="open">
      <view class="ul">
        <view
          class="li"
          v-for="(item, index) in list"
          :key="index"
          @click="selectHandle(item)"
        >
          <view class="context">{{ item.title }}</view>
          <u-line dashed direction="row"></u-line>
        </view>
        <view class="cancel li" @click="cancelHandle">
          <text>取消</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'

const emit = defineEmits(['update:show', 'selectHandle'])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
  show: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Array<any>,
    default: () => {},
  },
})
const { show, list } = toRefs(props)

watch(
  () => show.value,
  () => {
    if (show.value) {
      uni.hideTabBar()
    }
  }
)

const open = () => {
  //console.log('open');
  emit('update:show', true)
}
const close = () => {
  uni.showTabBar()
  emit('update:show', false)
  // console.log('close');
}

const cancelHandle = () => {
  uni.showTabBar()
  emit('update:show', false)
}

const selectHandle = (e: any) => {
  uni.showTabBar()
  emit('selectHandle', e)
  emit('update:show', false)
}

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.ul {
  width: 100%;
  background-color: #eaeaec;

  .li {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;

    .context {
      padding: 30rpx 0;
    }
  }

  .cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    font-size: 1rem;
    padding: 30rpx 0;
  }
}
</style>
